<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="订单详情"
      :visible.sync="visible"
      width="1024px"
      height="600px"
    >
      <!-- 左右布局 -->
      <div class="center">
        <!-- 左侧 -->
        <div class="left">
          <el-row class="detail-info" :gutter="16">
            <el-col :span="14">
              <span>订单编号:</span>
              <span>{{ detailData.orderCode }}</span>
            </el-col>
            <el-col :span="10">
              <span>下单时间:</span>
              <span>{{ detailData.transactTime }}</span>
            </el-col>
            <el-col :span="14">
              <span>责任机构:</span>
              <span>{{ detailData.orgName }}</span>
            </el-col>
            <el-col :span="10">
              <span>处理人:</span>
              <span>{{ detailData.ownerName }}</span>
            </el-col>
            <el-col :span="14">
              <span>支付方式:</span>
              <span>{{
                detailData.paymentMethod === 1
                  ? "现金"
                  : detailData.paymentMethod === 2
                    ? "微信支付"
                    : detailData.paymentMethod === 128
                      ? "支付宝"
                      : detailData.paymentMethod === 256
                        ? "预付卡"
                        : detailData.paymentMethod === 16
                          ? "月结"
                          : ""
              }}</span>
            </el-col>
            <el-col :span="10">
              <span>支付状态:</span>
              <span>{{
                detailData.payStatus === 1
                  ? "未支付"
                  : detailData.payStatus === 2
                    ? "预支付"
                    : detailData.payStatus === 3
                      ? "已支付"
                      : detailData.payStatus === 4
                        ? "退款失败"
                        : detailData.payStatus === 5
                          ? "已退款"
                          : detailData.payStatus === 6
                            ? "退款中"
                            : "暂无"
              }}</span>
            </el-col>
            <el-col :span="14">
              <span>客户编号:</span>
              <span>{{ detailData.csmCode }}</span>
            </el-col>
            <el-col :span="10">
              <span>客户名称:</span>
              <span>{{ detailData.csmName }}</span>
            </el-col>
            <el-col :span="24">
              <span>客户地址:</span>
              <span>{{ detailData.csmAddress }}</span>
            </el-col>
          </el-row>
          <div
            class="doneImg"
            :style="{ backgroundImage: 'url(' + statusImg + ')' }"
          />
          <!-- 表格 -->
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :data="tableData.data"
            :column="tableData.column"
            :immediate-fetch="false"
            :pagination="false"
            :max-height="300"
          />
          <!-- 描述列表2 -->

          <el-row class="detail-info" :gutter="16">
            <el-col :span="14">
              <span>商品总额:</span>
              <span>{{ detailData.decimalSpare4 }}</span>
            </el-col>
            <el-col :span="10">
              <span>远距配送费:</span>
              <span>{{ detailData.decimalSpare1 }}</span>
            </el-col>
            <el-col :span="14">
              <span>上楼费:</span>
              <span>{{ detailData.decimalSpare2 }}</span>
            </el-col>
            <el-col :span="10">
              <span>服务费:</span>
              <span>{{ detailData.decimalSpare3 }}</span>
            </el-col>
            <el-col :span="14">
              <span>优惠金额:</span>
              <span>{{ detailData.totalFee4 }}</span>
            </el-col>
          </el-row>
          <div class="settlement">
            <span
              style="margin-right: 40px;"
            >应收金额：{{ detailData.treceivables }}</span>
            <span>实收金额：{{ detailData.taccReceivable }}</span>
          </div>
          <div class="urge-record">
            <div class="head">
              <h4>催单记录<span>{{ urgeList.length?'('+urgeList.length+')':'' }}</span></h4>
              <el-button type="primary" @click="reminders">催单</el-button>
            </div>
            <div class="content">
              <div v-for="(item,index) of urgeList" :key="index" class="urge-item">
                <div class="item-left">
                  <div class="item-head">
                    <span />
                    <span>{{ item.happentDt }}</span>
                  </div>
                  <div class="item-content">
                    <p>{{ item.regUser }}</p>
                    <p>催单一次</p>
                    <p>理由：<span>{{ item.remark }}</span></p>
                  </div>
                </div>

                <div v-if="item.readStatus===2" class="item-right">
                  <div class="item-head">
                    <span />
                    <span>{{ item.readTime }}</span>
                  </div>
                  <div class="item-content">
                    <p>配送员已读</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <span>流转信息：</span>
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(item, index) in flowInfoData"
              :key="index"
              :timestamp="
                `${parseTime(item.traceTime, '{y}-{m}-{d} {h}:{i}')} ${
                  item.contacter
                }`
              "
              placement="top"
            >
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <h4 v-if="item.marker">{{ `备注:${item.marker}` }}</h4>
                <p>
                  {{
                    `发生部门&nbsp;——&nbsp;${
                      item.facilityName ? item.facilityName : "系统"
                    }`
                  }}
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <reminders ref="reminders" @close="getUrgeList" />
    </el-dialog>
  </div>
</template>

<script>
  import { crmOrderTrace, crmOrderDetail, crmOrderUrgeList } from '@/api'
  import moment from 'dayjs'
  import dayjs from 'dayjs'
  import { formatColumnMap } from '@/utils'
  import { parseTime } from '@/utils'
  import reminders from './reminders.vue'

  export default {
    name: 'merchantSide-OrderDetails',
    components: {
      reminders
    },
    data() {
      return {
        moment,
        formatColumnMap,
        parseTime,
        visible: false,
        reverse: true,
        payStatusMap: [],
        paymentMethodMap: [],
        detailData: {},
        flowInfoData: [], // 流转信息
        urgeList: [],
        tableData: {
          column: [
            {
              prop: 'goodsName',
              label: '商品名称',
              minWidth: 100
            },
            {
              prop: 'goodsCode',
              label: '规格',
              minWidth: 105
            },
            {
              prop: 'gcount',
              label: '数量',
              minWidth: 70
            },
            {
              prop: 'fee1',
              label: '远距配送费',
              minWidth: 70
            },
            {
              prop: 'fee2',
              label: '上楼费',
              minWidth: 70
            },
            {
              prop: 'tip',
              label: '服务费',
              minWidth: 70
            },
            {
              prop: 'gprince',
              label: '单价',
              minWidth: 70
            }
          ],
          data: []
        }
      }
    },
    computed: {
      statusImg: function() {
        if (this.detailData.orderStatus) { return require(`@/assets/order_status/${this.detailData.orderStatus}.png`) }
        return ''
      }
    },
    methods: {
      open(temp) {
        console.log(temp)
        if (temp.orderCode) {
          this.detailData = temp
          this.crmOrderDetail(temp)
          this.getFlowInfoData(temp)
          this.getUrgeList()
        }
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getUrgeList() {
        const params = {
          // corpSN: this.detailData.corpSN,
          // orderCode: this.detailData.orderCode
          billCode: this.detailData.orderCode,
          billType: 1
        }
        const res = await crmOrderUrgeList(params)
        if (res && res.data) {
          if (res.data.length > 0) {
            this.urgeList = res.data.map((item) => ({
              ...item,
              happentDt: item.happentDt ? dayjs(item.happentDt).format('YYYY-MM-DD HH:mm:ss') : '',
              readTime: item.readTime ? dayjs(item.readTime).format('YYYY-MM-DD HH:mm:ss') : ''
            }))
          }
        }
      },
      async crmOrderDetail(temp) {
        const param = {
          corpCode: temp.corpCode,
          orderCode: temp.orderCode
        }
        const res = await crmOrderDetail(param)
        this.tableData.data = res.data
      },
      async getFlowInfoData(temp) {
        const res = await crmOrderTrace({
          corpCode: temp.corpCode,
          orderCode: temp.orderCode
        })
        this.flowInfoData = res.data
      },
      async reminders() {
        this.$refs.reminders.open(this.detailData)
      }
    }
  }
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;

  .left {
    position: relative;
    width: 600px;
    height: 100%;
    .detail-info {
      padding-left: 10px;
      line-height: 28px;
    }
    .doneImg {
      position: absolute;
      top: 80px;
      right: 80px;
      width: 61px;
      height: 61px;
      background-size: 61px 61px;
    }

    .settlement {
      font-size: 16px;
      font-weight: 700;
      color: #f54d28;
    }
    .urge-record {
      padding-bottom: 20px;
      margin-top: 10px;
      .head {
        display: flex;
        align-items: center;
      }
      h4 {
        margin: 0;
        margin-right: 20px;
        font-weight: 700;
        line-height: 24px;
        span {
          color: #12b1b1;
        }
      }
      .content {
        margin-top: 20px;
        .urge-item {
          display: flex;
          justify-content: space-between;
          .item-left,
          .item-right {
            .item-head {
              display: flex;
              align-items: center;
              span {
                display: block;
              }
              span:nth-child(1) {
                width: 18px;
                height: 18px;
                margin-right: 10px;
                background-color: #12b1b1;
                border-radius: 50%;
              }
              span:nth-child(2) {
                line-height: 30px;
                color: #909399;
              }
            }
            .item-content {
              display: flex;
              padding-left: 28px;
              p {
                margin-right: 10px;
                font-weight: bold;
              }
              p:nth-child(1) {
                width: 172px;
                min-width: 172px;
              }
              p:nth-child(2) {
                width: 60px;
                min-width: 60px;
              }
              p:nth-child(3) {
                width: auto;
              }
            }
          }
          .item-left {
            flex: 1;
          }
          .item-right {
            .item-content {
              p:nth-child(1) {
                width: 100px;
                min-width: 100px;
              }
            }
          }
        }
      }
    }

    .el-table {
      margin-bottom: 20px;
    }

    .el-descriptions {
      margin-bottom: 20px;
    }

    img {
      width: 61px;
      height: 61px;
      margin-left: 80px;
    }
  }

  .right {
    width: 400px;
    height: 100%;
    margin-left: 15px;

    span {
      display: block;
      height: 24px;
      padding-left: 20px;
      font-weight: 700;
      line-height: 24px;
      background-color: #e3e3e3;
    }

    .el-timeline {
      margin-top: 20px;
    }
  }
}
</style>
